<template>
  <div>
    <li>
      <div v-if='data.id>0' @click='changepid(data.id)' :class="pid == data.id?'active':''" :id='data.id'>{{data.name}}</div>
      <ul v-if='data.son && data.son.length>0'>
        <reply v-for='son in data.son' :data='son' :key='son.id'/>
      </ul>
    </li>
  </div>
</template>

<script>
export default {
  name: "reply",
  props:['data'],
  data(){
    return{
      pid:0,
    }
  },
  methods: {
    changepid(pid){
      this.pid = pid
      localStorage.setItem('pid',pid)
      //样式把active全删除，把当前的加上样式
      let activelist = document.getElementsByClassName('active')
      for(var i=0;i<activelist.length;i++){
        activelist[i].classList.remove('active')
      }
      //获取当前元素加上样式
      let pre = document.getElementById(pid)
      pre.classList.add('active')
    }
  },
}
</script>

<style scoped>
ul {
  padding-left:5rem;
}
.active{
  background-color: aquamarine;
}
</style>
